<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, div, ul, ol, dl, li, dt, dd, p, h1, h2, h3, h4, h5, h6, tr, td, input, textarea {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        div {
            width: 100%;
            height: 100%;
            background-color: #000;
        }
    </style>

</head>
<body>
<div id="main"></div>
<script src="Underscore-min.js"></script>
<script src="js.js"></script>
<script>
        //不能用window.onload = function(){}

        var mainBox = document.getElementById('main');
        //设置个空数组存放小球
        var ballArray = [];
        //设置一数组存放颜色
        var color = ['red', 'green', 'yellow', 'pink', 'blue', 'purple', 'orange'];
        mainBox.onmousemove = function (event) {
            var event = event || window.event;
            //创建小球
            var myBall = new ColorBall({
                parentId: 'main',
                x: event.clientX,
                y: event.clientY,
                bgColor: color[_.random(0, color.length - 1)]
            });
        };
        //显示小球
        setInterval(function () {
            //清空屏幕上已经出现的小球
            for(var i= 0;i < mainBox.children.length;i++){
                //删除小球
                mainBox.removeChild(mainBox.children[i]);
            }

            //渲染小球
            for (var i = 0; i < ballArray.length; i++) {
                ballArray[i].render();
                ballArray[i].update();
            }
        }, 50)
</script>
</body>
</html>